<template>
  <div class="myCheck">
    <div
      v-for="(item,index) in data"
      :key="index"
      class="checkBox">
      <div class="title">{{item.title}}</div>
      <div class="text">{{item.text}}</div>
      <div class="btn">
        <el-button
          @click="toJump(item.jumpUrl)"
          type="text">
          {{item.btn}}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "myCheck",
        data() {
            return {
                data: [
                    {
                        title: '学科分析报告',
                        text: '分析你的学科潜力和学科能力，科学作出选科决策',
                        btn: '去作答',
                        jumpUrl: '/class'
                    },
                    {
                        title: '我的科目组合',
                        text: '初步选择几个科目组合',
                        btn: '了解详情',
                        jumpUrl: '/subReport'
                    },
                    {
                        title: '我的意向志愿',
                        text: '再选科查询系统中添加意向志愿',
                        btn: '了解详情',
                        jumpUrl: '/subReport'
                    }
                ]
            }
        },
        methods: {
            toJump(route) {
                let routeUrl = this.$router.resolve({
                    path: route,
                    query: {
                        id: 1
                    }
                });
                window.open(routeUrl.href, '_blank');
            }
        }
    }
</script>

<style scoped lang="scss">
  .myCheck{
    .checkBox{
      display: flex;
      justify-content: space-around;
      border: 1px solid #f2f2f2;
      margin: 10px 0;
      div{
        height: 90px;
        line-height: 90px;
        text-align: center;
      }
      .title{
        width: 16%;
        background-color: rgba(64, 158, 250,0.5);
        color: #fff;
      }
      .text{
        width: 74%;
        text-align: left;
        padding-left: 20px;
      }
      .btn{
        width: 10%;
      }
    }
  }
</style>